<template>
    <div class="users">
      <h2 style="margin-bottom: 20px;">对话消息管理</h2>
  
        
  <!-- <el-row :gutter="20" style="margin-bottom: 20px;">
    <el-col :span="8"> 
      <el-input clearable  placeholder="请输入内容" class="input-with-select" ></el-input>
    </el-col>
    <el-button   >查询</el-button>
    <el-button type="primary" @click="add_user()">新增</el-button>
  </el-row> -->
  
  
  <el-table :data="list"  stripe>
    <el-table-column prop="id" label="ID"></el-table-column>
    <el-table-column prop="nickname" label="用户昵称" ></el-table-column>
    <el-table-column prop="content" label="评论内容" >
      <template #default="scope">
          <el-tooltip
            class="item"
            effect="dark"
            :content="scope.row.content"
            placement="top">
            <div class="nickname-cell">
              {{ scope.row.content }}
            </div>
          </el-tooltip>
        </template>
    </el-table-column> 
    
    
    <el-table-column prop="create_date" label="创建时间" >
      
    </el-table-column>    
     
    
    <el-table-column  label="操作" width="150px">
      <template #default="scope">
    
        <el-button type="danger"  size="small"  @click="delList(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  
  
   <!-- 分页区域 -->
   <el-pagination
      background
      :page-size="size"
      :pager-count="11"
      layout="prev, pager, next"
      :total="total"
      @current-change="change"
    />
  
    
    </div>
  </template> 
  
  <script setup lang="ts">
  import {ref} from 'vue'
  import {getlist,deleteList,gettotal} from '../api/new.js'
  import  { ElMessage } from 'element-plus'
  const list = ref([
    
  ])
  //分页
  let count = ref(1)
  //条数
  let size = ref(10)
  let total = ref(100)
  function change(value: number){
    count.value = value
    Getlist()
  }
  //获取总数
  const totals = async()=>{
    const {data:res}= await gettotal('gettotal')
    total.value = res.total
  }
  totals()
  //获取列表
  const Getlist = async ()=>{
    const {data:res} = await getlist(`getlist/${count.value}`)
    console.log(res)
    if(res.data.code != 200) return
    if(res.data.list.length == 0) return list.value = []
    res.data.list.map((item:any)=>{
      item.state = Number(item.state) 
    })
    list.value = res.data.list
  }
  
  //删除
  const delList = async (id:number)=>{
    const {data:res} = await deleteList(`delete/${id}`)
    console.log(res)
    if(res.data.code != 200) return ElMessage.error('删除失败')
    ElMessage.success('删除成功')
    Getlist()
  }
  
  //修改
  const updatashow = ref(false)
  const Info = ref({
    state: '',
    id: 0
  })
  const updata = (id:number)=>{
    updatashow.value = true
    Info.value.id = id
  }


  
  
  Getlist()
  </script>
  
  <style scoped>
  .nickname-cell {
    white-space: nowrap; 
    overflow: hidden;   
    text-overflow: ellipsis; 
    max-width: 200px;   
  }
  </style>